<template>
  <div class="list">
    <span v-for="(value, key) of alphabet" :key="key" @click="handleClickLetter">{{key}}</span>
  </div>
</template>

<script>
export default {
  name: 'alphabet',
  props: {
    alphabet: Object
  },
  methods: {
    handleClickLetter (e) {
      // console.log(e.target.innerText)
      this.$emit('change', e.target.innerText)
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import "~@/assets/style/varible.styl"
.list
  position absolute
  right 0.05rem
  top 0
  bottom 0
  display flex
  flex-direction column
  justify-content center
  span
    display block
    padding 0.05rem 0
    font-size .3rem
    color $color-blue
    text-align center
</style>
